<template>
  <view class="">
    <view class="item-block">
      <view class="item-img">
        <view class="image">
          <fu-image :src="item.thumb" mode="aspectFill"></fu-image>
        </view>
      </view>
      <view class="item-info">
        <view class="item-title text-333 text-df text-cut-2">
          <block v-if="item.goods_label">
            <text class="item-tips text-xs" v-for='(item,index) in item.goods_label' :key="index">
              {{item}}
            </text>
          </block>
          <text style="vertical-align: middle;">{{item.name}}</text>
        </view>
        <view class="item-num text-999 text-sm">
          销量{{item.sales_sum}}
        </view>
        <view class="item-price">
        
          <text class=" text-lg ">
            <text class="font-22 text-price"></text>
          {{item.shop_price}}</text>
          <text class="text-through text-sm text-price">{{item.market_price}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import fuImage from '../../../../components/fu-image/fu-image.vue';
  export default{
    components:{fuImage},
    props:{
      item:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data(){
      return{

      }
    }
  }
</script>

<style scoped lang="scss">
  .font-22{
    font-size: 22rpx;
  }
  .item-block{
    background: #FFFFFF;
    box-shadow: 0px 0px 30rpx rgba(55, 26, 26, 0.04);
    border-radius: 16rpx;
    overflow: hidden;
    .item-img{
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      background:#f8f8f8;
      .image{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .item-info{
      padding: 0 20rpx;
      margin:20rpx 0;
      // border:1px solid red;
      // box-sizing: border-box;
      .item-title{
        height: 80rpx;
        // margin: 10rpx 0;
        margin-top: 24rpx;
        margin-bottom: 10rpx;
        .item-tips{
          // flex: 1 0 auto;
          padding: 4rpx 6rpx;
          text-align: center;
          background: rgba(255,100,100,0.1);
          border-radius: 4rpx;
          color: #FF6464;
          margin-right: 8rpx;
          display:inline-block;
          vertical-align: middle;
        }
      }
      .item-num{
        // padding: 4rpx 0;
        // border:1px solid red;

      }
      .item-price{
        // padding-bottom: 16rpx;

        padding-top: 27rpx;
        height: 47rpx;
        line-height: 36rpx;
        margin-bottom: 34rpx;
        text{
          &:nth-child(1){
            color: #FA2033;
          }
          &:nth-child(2){
            color: #BFBFBF;
            padding-left: 16rpx;
          }
        }
      }
    }

  }
</style>
